Part1 - Web interfcae
ROS2 Web interface
Rosbridge#
Rosbridge provides a JSON API to ROS functionality for non-ROS programs
install
sudo apt-get install ros-foxy-rosbridge-suite
Run#
Open websocket on port 9090 as default
run bridge
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
roslibjs#
roslibjs is the core JavaScript library for interacting with ROS from the browser.
It uses WebSockets to connect with rosbridge and provides publishing, subscribing, service calls, actionlib, TF, URDF parsing, and other essential ROS functionality
Run#
Demo web page using roslibjs library
basic connection
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" type="text/javascript">
var ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
ros.on('connection', function () {
document.getElementById("status").innerHTML = "Connected";
});
ros.on('error', function (error) {
document.getElementById("status").innerHTML = "Error";
});
ros.on('close', function () {
document.getElementById("status").innerHTML = "Closed";
});
</script>
</head>
<body>
<h1>Simple ROS User Interface</h1>
<p>Connection status: <span id="status"></span></p>
</body>
</html>